import { defineComponent, Fragment } from "vue";
import { ElButton, ElIcon } from "element-plus";
import {
  Delete,
  Search,
  RefreshLeft,
  RefreshRight,
  Document,
} from "@element-plus/icons-vue";
import { useLayoutStore } from "../store/index";
import useCommond from "../util/Commod";

export default defineComponent({
  setup() {
    let layoutStore = useLayoutStore();
    let commondStore = useCommond();

    const showJsonBtn = (e: any) => {
      console.log(JSON.stringify(layoutStore.getComponents));
    };

    const undoBtn = (e: any) => {
      commondStore.undo();
    };

    const redoBtn = (e: any) => {
      commondStore.redo();
    };

    const deleteBtn = (e: any) => {};

    const searchBtn = (e: any) => {};

    return () => (
      <Fragment>
        <ElButton type="primary" icon={RefreshLeft} onClick={undoBtn} />
        <ElButton type="primary" icon={RefreshRight} onClick={redoBtn} />
        <ElButton type="primary" icon={Delete} onClick={deleteBtn} />
        <ElButton type="primary" icon={Search} onClick={searchBtn}>
          Search
        </ElButton>
        <ElButton type="primary" onClick={showJsonBtn}>
          ShwoJson
          <ElIcon>
            <Document></Document>
          </ElIcon>
        </ElButton>
      </Fragment>
    );
  },
});
